<template>
  <div class="card-grid-page">
    <div class="card-grid-container">
      <!-- 左列 -->
      <div class="column left-column">
        <PCard 
          v-for="card in leftColumnCards" 
          :key="'left-' + card.id" 
          :card-data="card"
          @card-click="handleCardClick"
        />
      </div>
      
      <!-- 右列 -->
      <div class="column right-column">
        <PCard 
          v-for="card in rightColumnCards" 
          :key="'right-' + card.id" 
          :card-data="card"
          @card-click="handleCardClick"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import PCard from '../components/Pcard.vue';

// 模拟数据获取
const fetchCards = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve([
        {
          id: 1,
          title: "时尚/03'14'",
          description: '潮流玩家必懂的[最前卫穿搭公式]',
          image: 'https://codelover.club/coursefiles/images/film/时尚.jpeg',
          tag: ''
        },
        {
          id: 2,
          title: "汽车/03'14'",
          description: '老司机狂推的[最硬核驾驶体验]',
          image: 'https://codelover.club/coursefiles/images/film/汽车.jpeg',
          tag: ''
        },
        {
          id: 3,
          title: "混剪/03'14'",
          description: '剪辑师跪着看完的[最丝滑转场魔法]',
          image: 'https://codelover.club/coursefiles/images/film/混剪.jpeg'
        },
        {
          id: 4,
          title: "游戏/03'14'",
          description: '电竞党尖叫的[最爽操作瞬间合集]',
          image: 'https://codelover.club/coursefiles/images/film/游戏.jpeg',
          tag: ''
        },
        {
          id: 5,
          title: "爱情/03'14'",
          description: '单身狗必学的[最撩心动信号指南]',
          image: 'https://codelover.club/coursefiles/images/film/爱情.jpeg'
        },
        {
          id: 6,
          title: "生活/03'14'",
          description: '打工人必备的[最治愈宅家小确幸]',
          image: 'https://codelover.club/coursefiles/images/film/生活.jpeg'
        },
        {
          id: 7,
          title: "科幻/03'14'",
          description: '极客圈封神的[最硬核未来预言]',
          image: 'https://codelover.club/coursefiles/images/film/科幻.jpeg'
        },
        {
          id: 8,
          title: "纪录/03'14'",
          description: '知识控狂喜的[最震撼真相揭秘]',
          image: 'https://codelover.club/coursefiles/images/film/纪录.jpeg',
          tag: ''
        }
      ]);
    }, 500);
  });
};

const cards = ref([]);

// 获取卡片数据
fetchCards().then(data => {
  cards.value = data;
});

// 计算属性：将卡片分配到左右两列
const leftColumnCards = computed(() => {
  return cards.value.filter((_, index) => index % 2 === 0);
});

const rightColumnCards = computed(() => {
  return cards.value.filter((_, index) => index % 2 !== 0);
});

const handleCardClick = (cardId) => {
  console.log('卡片被点击:', cardId);
  // 这里可以添加路由跳转或其他逻辑
};
</script>

<style scoped>
.card-grid-page {
  width: 100%;
  min-height: 100vh;
  /* padding: 20px; */
  box-sizing: border-box;
  background-color: #f5f5f5;
}

.card-grid-container {
  display: flex;
  gap: 5px;
  /* max-width: 1400px; */
  margin: 0 auto;
}

.column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

@media (max-width: 768px) {
  .card-grid-container {
    flex-direction: column;
  }
  
  .card-grid-page {
    padding: 10px;
  }
}
</style>